<script setup>
import {
  Memo,
  House,
  Search,
  Remove,
  EditPen,
  SwitchButton,
  CaretBottom,
  Connection,
} from "@element-plus/icons-vue";
import avatar from "@/assets/pictor/avater.png";
import useUserInfoStore from "/src/stores/userInfo.js";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, ref } from "vue";
import { titleServer } from "@/server/iIndex";
import tabs from "../components/tabs.vue";
const router = useRouter();
const route = useRoute();
const isActive = (path) => {
  return route.path === path;
};
const userInfoStore = useUserInfoStore();
const handleCommand = async (command) => {
  if (command === "logout") {
    await ElMessageBox.confirm("你确认退出登录吗？", "温馨提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    });
    userInfoStore.removeInfo();
    await router.push("/");
    ElMessage({
      type: "success",
      message: "退出成功",
    });
  }
};
const routerRepwd = () => {
  router.push("/index/rePwd");
};
const title = ref("华星GOA TFT Size自动优化智能系统");
onMounted(async () => {
  const response = await titleServer();
  title.value = response.title;
});
</script>

<template>
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="150px">
      <div class="el-aside__logo">
        <img src="../assets/pictor/tcl.png" alt="Tcl Logo" />
      </div>
      <el-menu
        active-text-color="#000000"
        background-color="transparent"
        text-color="#000000"
        router
        style="border-radius: 8px; display: flex; flex-direction: column"
      >
        <el-divider></el-divider>
        <el-menu-item
          index="/index/iIndex"
          :style="{
            backgroundColor: isActive('/index/iIndex') ? '#cecece' : '',
          }"
          style="
            margin-top: -20px;
            margin-bottom: -20px;
            font-size: 18px;
            margin-left: -7px;
          "
        >
          <House style="height: 19px; margin-right: 5px" />
          主页总览
        </el-menu-item>
        <el-divider></el-divider>
        <el-menu-item
          index="/circuit/searchCircuit"
          :style="{
            backgroundColor: isActive('/circuit/searchCircuit')
              ? '#cecece'
              : '',
          }"
          style="
            margin-top: -20px;
            margin-bottom: -20px;
            font-size: 18px;
            margin-left: -7px;
          "
        >
          <Search style="height: 19px; margin-right: 5px" />
          电路搜索
        </el-menu-item>
        <el-divider></el-divider>
        <el-menu-item
          index="/algorithm/demo"
          :style="{
            backgroundColor: isActive('/algorithm/demo') ? '#cecece' : '',
          }"
          style="
            margin-top: -20px;
            margin-bottom: -20px;
            font-size: 18px;
            margin-left: -7px;
          "
        >
          <Connection style="height: 19px; margin-right: 5px" />
          算法配置
        </el-menu-item>
        <el-divider></el-divider>
        <el-menu-item
          index="/simulation/validation"
          :style="{
            backgroundColor: isActive('/simulation/validation')
              ? '#cecece'
              : '',
          }"
          style="
            margin-top: -20px;
            margin-bottom: -20px;
            font-size: 18px;
            margin-left: -7px;
          "
        >
          <Remove style="height: 19px; margin-right: 5px" />
          仿真验证
        </el-menu-item>
        <el-divider></el-divider>
        <el-menu-item
          index="/results/resultsQuery"
          :style="{
            backgroundColor: isActive('/results/resultsQuery') ? '#cecece' : '',
          }"
          style="
            font-size: 18px;
            margin-top: -20px;
            margin-bottom: -20px;
            margin-left: -7px;
          "
        >
          <FolderChecked style="height: 19px; margin-right: 5px" />
          <span>结果查询</span>
        </el-menu-item>
        <el-divider></el-divider>
        <el-menu-item
          index="/task/index"
          :style="{
            backgroundColor: isActive('/task/index') ? '#cecece' : '',
          }"
          style="
            font-size: 18px;
            margin-top: -20px;
            margin-bottom: -20px;
            margin-left: -7px;
          "
        >
          <Memo style="height: 19px; margin-right: 5px" />
          <span>任务状态</span>
        </el-menu-item>
        <el-divider></el-divider>
        <el-menu-item
          index="/test/demo"
          :style="{
            backgroundColor: isActive('/test/demo') ? '#cecece' : '',
          }"
          style="
            font-size: 18px;
            margin-top: -20px;
            margin-bottom: -20px;
            margin-left: -7px;
          "
        >
          <Memo style="height: 19px; margin-right: 5px" />
          <span>测试模拟</span>
        </el-menu-item>
        <el-divider></el-divider>
      </el-menu>
    </el-aside>
    <!-- 右侧主区域 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <div
          style="display: flex; justify-content: flex-end; margin-right: 20px"
        >
          <div
            style="
              margin-top: 10px;
              width: 80%;
              height: 100%;
              justify-content: center;
              align-items: center;
              display: flex;
            "
          >
            <strong style="margin-left: -80px">{{ title }}</strong>
          </div>
          <div style="font-size: 18px; margin-top: 10px; margin-right: 15px">
            用户：<strong>{{ userInfoStore.info }}</strong>
          </div>
          <el-dropdown placement="bottom-end" @command="handleCommand">
            <span class="el-dropdown__box">
              <el-avatar
                :src="userInfoStore.info?.imgUrl || avatar"
                alt="用户头像"
                style="width: 31px; height: 31px; margin-top: 5.5px"
              />
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  :icon="EditPen"
                  @click="routerRepwd"
                  style="font-size: 18px"
                  >修改密码</el-dropdown-item
                >
                <el-dropdown-item
                  command="logout"
                  :icon="SwitchButton"
                  style="font-size: 18px"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <!-- 中间区域 -->
      <el-main class="main-content">
        <div
          style="
            height: 100%;
            width: 100%;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <div
            style="
              height: 98%;
              width: 98%;
              background-color: #ffffff;
              justify-content: center;
              border-radius: 8px;
            "
          >
            <tabs style="height: 100%"></tabs>
            <!-- <router-view></router-view> -->
          </div>
        </div>
      </el-main>
      <!-- 底部区域 -->
      <el-footer>
        <a style="margin-top: -40px; margin-left: -80px">by TCL</a>
      </el-footer>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.main-content {
  margin-top: -15px;
  margin-left: -20px;
  width: 100%;
  flex-direction: column;
  // height: 80%;
}
.layout-container {
  height: 100vh;
  border-radius: 8px;

  .el-aside {
    background-image: linear-gradient(to bottom, #ffffff);
    height: 100%;
    border-radius: 8px;
    display: flex;

    align-items: center;
    flex-direction: column;
    &__logo {
      height: 100px;
      margin-top: 10px;
      margin-left: 10px;
      margin-bottom: -35px;
      transform: scale(0.8);
    }

    .el-menu {
      border-right: none;
    }
  }

  .el-container {
    height: 100%;
  }

  .el-header {
    height: 40px;
    // background-image: linear-gradient(to right, #ffffff);
    background-color: #ffffff;

    // display: flex;
    align-items: center;
    // justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: rgb(1, 171, 220);
        margin-left: 10px;
        border-radius: 8px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-main {
    height: calc(100% - 64px - 50px);
    /* Adjust height based on header and footer height */
    display: flex;
    align-items: flex-start;
    /* 内容顶部对齐 */
    justify-content: flex-start;
    /* 内容左侧对齐 */
    padding: 20px;
    /* 添加内边距以避免内容贴边 */
  }

  .content-area {
    width: 100%;
    height: 100%;
    border: 1px solid red;
  }
  .el-divider {
    margin-top: 15%;
    margin-bottom: 11%;
  }
  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #05a0da;
    height: 1px;
    /* Adjust footer height if needed */
  }
}
</style>
